import Ginteraction from '@/utils/HshMap/Ginteraction';
import PublicInterface from  '@/utils/Common/PublicInterface';
import BrowserDiscover from  '@/utils/Common/BrowserDiscover';
import Goverlay from "@/utils/HshMap/Goverlay";
import 'ol/ol.css';
import Gmap from "@/utils/HshMap/Gmap";
import 'ol-ext/control/Legend.css';
import Legend from 'ol-ext/control/Legend';
import {Image as ImageLayer, Tile as TileLayer} from 'ol/layer';
import {ImageArcGISRest, TileArcGISRest} from 'ol/source';

import MeasureButton from '@terrestris/react-geo/dist/Button/MeasureButton/MeasureButton';
import ToggleGroup from '@terrestris/react-geo/dist/Button/ToggleGroup/ToggleGroup';
import SimpleButton from '@terrestris/react-geo/dist/Button/SimpleButton/SimpleButton';
import Toolbar from '@terrestris/react-geo/dist/Toolbar/Toolbar';
import DigitizeButton from '@terrestris/react-geo/dist/Button/DigitizeButton/DigitizeButton';
// import TimeLayerSliderPanel from '@terrestris/react-geo/dist/Panel/TimeLayerSliderPanel/TimeLayerSliderPanel';

import '@/pages/SpaceResources/map/index.module.css';
import u18 from '@/assets/map/u18.png';
import u22 from '@/assets/map/u22.png';
import u26 from '@/assets/map/u26.png';
import u34 from '@/assets/map/u34.png';
import u30 from '@/assets/map/u30.png';

import React from 'react';
import { Layout, Menu, DatePicker,Input,Breadcrumb, Icon,Button, Checkbox,Slider,Select,Spin,Dropdown,Radio  } from 'antd';
const { Option } = Select;
const { Search } = Input;
import { connect } from 'dva';
import Glayers from "@/utils/HshMap/Glayers";
import Gstyle from "@/utils/HshMap/Gstyle";
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

import moment from 'moment'

import MenuCom from '@/components/Menus/menu';
import iconFont from '@/utils/iconfont';
import styles from './space.less'
// import { calculateBorderBoxPath } from 'html2canvas/dist/types/render/bound-curves';
// import HorizontalTimeline from 'react-horizontal-timeline'

import LegendComm from '@/components/Legend';

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconFont
})

@connect(({ space }) => ({ space }))
class SpaceResources extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      olMap: null,
      olMapBd1: null,
      olMapBd2: null,
      historyMap: null,
      bdMap1: null,
      bdMap2: null,
      checkLayerList: [],
      layerList: [],
      layerVectorList: [],
      historyData: {},
      historyDataUrl: {},
      historyMinMax: {},
      tableColsList: {},
      height: 768,
      legend: null,
      dbValueLeft: null,
      dbValueRight: null,
      globalLoading: false,
      defaultDataSource: null,
      imageValue: null,
      checkLayerListGrid: [],
      layerListGrid: [],
      DropdownDisabled: false,
      legends: {
        visible: false,
        title:'栅格图层',
        list:[]
      },

      tooltipVis: false,
      autoPlay: false
    }

    this.compareOnclick = false;
    this.mapDivId = `map-${Math.random()}`;
    this.mapDivId1 = `map1-${Math.random()}`;
    this.mapDivId2 = `map2-${Math.random()}`;

    this.map = new Gmap().map;
    // this.map.addControl(new FullScreen({tipLabel: '全屏切换'}));
    this.map1 =  new Gmap().map;
    this.map1.setView(this.map.getView());
    this.map2 =  new Gmap().map;
    this.map2.setView(this.map.getView());
    this.selectOverlay = null;
    this.featureSelected = null;

  }

  componentDidMount() {
    let _this = this;
    this.init();
    this.map.setTarget(this.mapDivId);
    this.map1.setTarget(this.mapDivId1);
    this.map2.setTarget(this.mapDivId2);
    this.state.olMap = this.map;
    this.state.olMapBd1 = this.map1;
    this.state.olMapBd2 = this.map2;
    //保存默认数据源
    this.state.defaultDataSource = this.map.getLayers().getArray()[0].getSource();
    // Define a new legend
    this.state.legend = new Legend({
      title: '图例',
      style: '',
      collapsed: false,
      collapsible: true,
      // margin: 10,
      size: [24, 24]
    });
    this.map.addControl(this.state.legend);

    // 窗口resize 监听
    this.handleResize();
    window.addEventListener('resize', this.handleResize);

    this.ginteraction = new Ginteraction(this.map);
    this.ginteraction.on_click(this.select_click_callback);
    this.ginteraction.on_select_hover(this.select_hover_callback);
    //对比
    this.ginteractionbd1 = new Ginteraction(this.map1);
    this.ginteractionbd1.on_click(this.select_click_callback);
    this.ginteractionbd1.on_select_hover(this.select_hover_callback);
    this.ginteractionbd2 = new Ginteraction(this.map2);
    this.ginteractionbd2.on_click(this.select_click_callback);
    this.ginteractionbd2.on_select_hover(this.select_hover_callback);

    const self = this;
    var  compare = document.getElementById('compare');
    var  mapDiv = document.getElementById(this.mapDivId);
    var  leftMenu = document.getElementById('leftMenu');
    var  search = document.getElementById('search');
    var  mapDivClass = document.getElementsByClassName('mapDivClass');

    var togglebutton = document.getElementsByClassName('react-geo-togglebutton');
    var history = document.getElementById('history');
    var historyPlayer = document.getElementById('historyPlayer');

    compare.onclick = function () {
      if(compare.classList.toString().indexOf('btn-pressed')!=-1) {
        self.compareOnclick = false;
        leftMenu.style.display = 'block';
        search.style.left = '20vw';
        compare.classList.remove('btn-pressed');
        for (let i = 0; i < mapDivClass.length; i++) {
          mapDivClass[i].style.display = 'none';
        }
        mapDiv.style.display = 'block';
        //取消
        for (let i = 0; i < togglebutton.length; i++) {
          togglebutton[i].disabled = false;
        }
        self.setState({
          DropdownDisabled: false
        })
        history.disabled = false;
      }else{
        self.compareOnclick = true;
        leftMenu.style.display = 'none';
        search.style.left = '3vw';
        if(history.classList.toString().indexOf('btn-pressed')!=-1){
          history.click();
        }
        self.updateclassName(document.getElementsByClassName('ant-btn'));
        compare.classList.add('btn-pressed');
        mapDiv.style.display = 'none';
        for (let i = 0; i < mapDivClass.length; i++) {
          mapDivClass[i].style.display = 'block';
        }
        //对比选中，则禁用其他
        for (let i = 0; i < togglebutton.length; i++) {
          togglebutton[i].disabled = true;
        }
        self.setState({
          DropdownDisabled: true
        })
        history.disabled = true;
        //进入对比功能时默认选择两个不同的时间
        self.onChangeTime(self.state.historyMinMax.min);
        self.onChangeTime2(self.state.historyMinMax.max);
      }
      //强制重新计算地图视口大小
      setTimeout(function () {
        self.map.updateSize();
        self.map1.updateSize();
        self.map2.updateSize();
      }, 100);
    }

    history.onclick =  function () {
      // var historyMap = self.state.historyMap;
      if(history.classList.toString().indexOf('btn-pressed')!=-1) {
        history.classList.remove('btn-pressed');
        historyPlayer.style.display = 'none';
        _this.setState({
          tooltipVis: false
        })
        // if (historyMap){
        //   historyMap.setVisible(false);
        // }

        //恢复底图
        let { olMap, defaultDataSource} = self.state;
        olMap.getLayers().getArray()[0].setSource(defaultDataSource);
      }else{
        var compareId = document.getElementById('compare');
        if( compareId.classList.toString().indexOf('btn-pressed')!=-1){
          document.getElementById('compare').click();
        }
        self.updateclassName(document.getElementsByClassName('ant-btn'));
        history.classList.add('btn-pressed');
        historyPlayer.style.display = 'block';
        _this.setState({
          tooltipVis: true
        })
        // if (historyMap){
        //   historyMap.setVisible(true);
        // }
        let { historyDataUrl,historyMinMax, imageValue } = self.state;
        if (!imageValue){
          imageValue = historyMinMax.min;
        }
        self.queryHistoryImage(historyDataUrl[imageValue]);
      }

    }

    const {historyData, historyDataUrl} = this.state;
    let historyArr = []
    for(let i in historyData){
      historyArr.push(i);
    }

    const timesopt = document.getElementsByClassName('ant-slider-mark');
    timesopt.onclick = function(e){
      _this.setState({
        imageValue: parseInt(historyArr[0])
      })
      // _this.queryHistoryImage(historyDataUrl[parseInt(historyArr[0])]);
    }
    timesopt.onclick()
  }

  updateclassName = (e) => {
    if(e){
      for (let i = 0; i < e.length; i++) {
        e[i].classList.remove('btn-pressed');
      }
    }
  }

  //click要素
  select_click_callback = (e) => {
    var self = this;
    self.clearStyle();
    var pupupProperties ={};
    e.map.forEachFeatureAtPixel(e.pixel, function (f, layer) {
      if(layer!=null && layer.values_.id!=null) {
        self.clearStyle();
        self.featureSelected = f;
        f.setStyle(Gstyle.pointermove_style);
        let coordinate = e.coordinate;
        let properties = f.getProperties();
        console.log(layer,'layer')
        console.log(self.state.tableColsList,'tableColsList')
        if(self.state.tableColsList[layer.values_.id]!=null && self.state.tableColsList[layer.values_.id].length > 0){
          self.state.tableColsList[layer.values_.id].forEach(item => {
            if(item.columnType == "timestamp"){
              pupupProperties[item.description] = properties[item.columnName] ? new Date(properties[item.columnName]).toLocaleDateString() : '--';
            }else {
              pupupProperties[item.description] = properties[item.columnName] ? properties[item.columnName] : '--';
            }
          });
          console.log(pupupProperties,'======')
          var overlay = Goverlay.getOverlay_click('hover', coordinate, 1, pupupProperties);
          self.selectOverlay = overlay;
          e.map.addOverlay(self.selectOverlay);
          self.map.getView().setCenter(coordinate);
          // self.selectOverlay.setPositioning("center-center");
          //关闭按钮
          var  closeOverlayFun = document.getElementsByClassName("closeOverlay");
          if (closeOverlayFun){
            for (let i = 0; i < closeOverlayFun.length; i++) {
              closeOverlayFun[i].onclick = function () {
                self.clearStyle();
              }
            }
          }
        }
      }
    });

  }

  //hover要素
  select_hover_callback = (e) => {
    if (e.dragging) {
      return;
    }
    var self = this;
    self.clearStyleOnly();
    if (e.selected != null &&e.selected[0] !=null){
      self.featureSelected = e.selected[0];
    }else {
      self.clearStyleOnly();
    }
  }

  clearStyle = () => {
    var self = this;
    if (self.selectOverlay){
      self.selectOverlay.setPosition(undefined);
      self.selectOverlay = null;
    }
    if (self.featureSelected){
      self.featureSelected.setStyle(null);
    }
  }

  clearStyleOnly = () => {
    var self = this;
    if (self.featureSelected){
      self.featureSelected.setStyle(null);
    }
  }


  queryServerHistory = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'space/queryHistoryImage',
      payload: {},
    });
  };

  //图层显隐
  onChangeMenu = e => {
    console.log('checked = ', e.target ? e.target.value: '');
    if(!e.target.value){
      return false;
    }
    let { checkLayerList,layerList } = this.state;
    if(e.target.checked==true) {
      for (let i = 0; i < layerList.length; i++) {
        if(layerList[i].layerType!=null && layerList[i].layerType.indexOf(e.target.value)!=-1){
          layerList[i].layerVector.setVisible(true);
          this.legendAddRow(e.target.value,e.target.tableId,e.target.mapType,e.target.mapName,e.target.description);
          return false;
        }
      }
      checkLayerList.push(e.target.value);
      this.addMapLayer(e.target.value,e.target.tableId,e.target.mapType,e.target.mapName,e.target.description);
    }else {
      checkLayerList.forEach(function(item, index, arr) {
        if(item == e.target.value) {
          arr.splice(index, 1);
        }
      });

      for (let i = 0; i < layerList.length; i++) {
        if(layerList[i].layerType!=null && layerList[i].layerType.indexOf(e.target.value)!=-1){
          layerList[i].layerVector.setVisible(false);
          break;
        }
      }
      this.legendVisible(e.target.value,e.target.tableId,e.target.mapType,e.target.mapName);
    }
  };

  //图层显隐 栅格图层
  onChangeMenuGrid = e => {
    console.log('checked = ', e.target ? e.target.value: '');
    if(!e.target.value){
      return false;
    }
    let { checkLayerListGrid,layerListGrid } = this.state;
    let { title } = this.state.legends;
    if(e.target.checked==true) {
      this.legendGrid(e.target.value + '/legend?f=pjson',e.target.name)
      for (let i = 0; i < layerListGrid.length; i++) {
        if(layerListGrid[i].layerType!=null && layerListGrid[i].layerType.indexOf(e.target.value)!=-1){
          layerListGrid[i].layerVector.setVisible(true);
          return false;
        }
      }
      checkLayerListGrid.push(e.target.value);
      this.addMapLayerGrid(e.target.value,e.target.tableId);
    }else {
      if (e.target.name == title){
        this.setState({
          legends: {
            visible: false
          }
        });
      }
      checkLayerListGrid.forEach(function(item, index, arr) {
        if(item == e.target.value) {
          arr.splice(index, 1);
        }
      });

      for (let i = 0; i < layerListGrid.length; i++) {
        if(layerListGrid[i].layerType!=null && layerListGrid[i].layerType.indexOf(e.target.value)!=-1){
          layerListGrid[i].layerVector.setVisible(false);
          break;
        }
      }

    }
  };
  //栅格图例
  legendGrid = (url,name) => {
    var self = this;
    // fetch方式
    fetch(url)
      // 返回response
      .then((response)=> {return response.json()})
      // 获取数据
      .then((data)=> {
        // 更新数据状态
        var list = [];
        if (data.layers){
          for (let i = 0; i < data.layers.length; i++) {
            list.push({type: '', label: data.layers[i].layerName + '('+ data.layers[i].layerId+')', imgSrc: ''})
            for (let j = 0; j < data.layers[i].legend.length; j++) {
              if (data.layers[i].legend[j].contentType.indexOf('image')!=-1) {
                list.push({type: 'icon', label: data.layers[i].legend[j].label, imgSrc: 'data:image/jpg;base64,'+data.layers[i].legend[j].imageData})
              }
            }
          }
          self.setState({
            legends: {
              visible: true,
              title:name,
              list: list
            }
          });
        }
      })
      // 捕获异常
      .catch((e)=> {console.log(e)})
  }

  //legend是否删除
  legendVisible = (layerType,tableId,mapType,mapName) =>{
    this.state.legend.refresh();
    var legendLength = this.state.legend.getLength();
    if (legendLength > 0) {
      for (let j = 0; j < legendLength; j++) {
        if (this.state.legend.getRow(j)["title"] == mapName){
          this.state.legend.removeRow(j);
          return;
        }
      }
    }
  }


  onChangeTime = value => {
    //指定当前选中的条目
    this.setState({
      dbValueLeft: value
    });
    let { historyDataUrl } = this.state;
    this.queryBd(historyDataUrl[value],1);
  }

  onChangeTime2 = value => {
    this.setState({
      dbValueRight: value
    });
    let { historyDataUrl } = this.state;
    this.queryBd(historyDataUrl[value],2);
  }

  init = () => {
     let browser = new BrowserDiscover().getBrowserInfo();
     console.log("========>" + browser);
    //解决本地和生产样式不一样的问题
    // if(window.location.port==""){
    //   document.getElementsByClassName('toolTip')[0].style.top = "2.5em";
    // }
    this.queryServer();
    this.queryServerHistory();
    this.mapSpecialQueryMap();
    var self = this;
    new PublicInterface().pubtabcolsList(this.props,{ifanalysis: 1},function (data) {
      self.setState({
        tableColsList: data
      })
    });
  };
  // 取父div的height
  handleResize = () =>{
    const self = this;
    const divWidth = document.body.clientWidth;
    const divHeight = document.body.clientHeight;
    self.setState({ width: divWidth, height: divHeight - 66 });
    setTimeout(function () {
      self.map.updateSize();
    }, 100);
  };
  // ajax请求
  queryServer = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'space/spaceResourcesQuery',
      payload: {},
    });
  };

  mapSpecialQueryMap = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'space/mapSpecialQuery',
      payload: {},
    });
  };

  // 加载图层
  addMapLayer = (layerType,tableId,mapType,mapName,description) => {
    const { dispatch } = this.props;
    this.setState({
      globalLoading: true
    });
    var vector = new Glayers().addVectorLayer('space/arcgisFeatureServerQuery',dispatch,' status_cd=1 ',layerType,4326,description,  () => {
      this.setState({
        globalLoading: false
      })
    });
    vector.set('id', tableId);
    vector.setZIndex(tableId);
    this.map.addLayer(vector);
    this.map1.addLayer(vector);
    this.map2.addLayer(vector);
    let { layerList,layerVectorList } = this.state;
    layerList.push({'layerType': layerType, 'layerVector': vector});
    layerVectorList.push(vector);
    this.legendAddRow(layerType,tableId,mapType,mapName,description);
  };

  // 加载图层 栅格图层
  addMapLayerGrid = (layerType,tableId) => {
    var self = this;
    self.setState({
      globalLoading: true
    });
    new Glayers().gridLayer(layerType,tableId,function (layer) {
      self.setState({
        globalLoading: false
      });
      self.map.addLayer(layer);
      let { layerListGrid } = self.state;
      layerListGrid.push({'layerType': layerType, 'layerVector': layer});
    })
  };

  //新增legend
  legendAddRow = (layerType,tableId,mapType,mapName,description) => {
    var style = null,typeGeom = null;
    var classify = layerType.substr(layerType.lastIndexOf('/')+1);
    if(mapType=='layer_point'){
      // if (layerType.indexOf('poi')!=-1){
      //   style = Gstyle.styleDefault();
      // }else {
        style = Gstyle.styleCacheIndexPoint(description, classify);
      // }
      typeGeom = "Point" ;
    }else if(mapType=='layer_polygon'){
      style = Gstyle.styleCacheIndexPolygon(description,classify);
      typeGeom = "Polygon" ;
    }else if(mapType=='layer_line'){
      style = Gstyle.styleCacheIndexLineString(description,classify);
      typeGeom = "LineString" ;
    }

    this.state.legend.addRow({
      title: mapName,
      typeGeom: typeGeom,
      style: style
    });
    this.state.legend.refresh();
  }

  onChangeSlider = value => {
    let { historyDataUrl } = this.state;
    var historyPlayer = document.getElementById('historyPlayer');
    if(historyPlayer.style.display!='block'){
      return false;
    }
    this.setState({
      imageValue: value
    },()=>{
      this.queryHistoryImage(historyDataUrl[value]);
    })
  };

  //历史影像
  queryHistoryImage = layerUrl => {
    var sourceLayer = new TileArcGISRest({
      url: layerUrl,
      cacheSize: 2048,
      params: {
        DPI: 50,
      }
    });
    // var TiandiMap_cva = new TileLayer({
    //   source: sourceLayer
    // });
    var { historyMap,olMap} = this.state;
    // if(historyMap== null ) {
    //   this.state.historyMap = TiandiMap_cva;
    //   olMap.addLayer(TiandiMap_cva);
    // }else {
    //   historyMap.setSource(sourceLayer);
    // }
    olMap.getLayers().getArray()[0].setSource(sourceLayer);

  }

  queryBd = (layerUrl,type) => {
    // var sourceLayer = new ImageArcGISRest({
    //   ratio: 1,
    //   params: {},
    //   url: layerUrl
    // });
    // var TiandiMap_cva = new ImageLayer({
    //   source: sourceLayer
    // });
    var sourceLayer = new TileArcGISRest({
      url: layerUrl,
      cacheSize: 2048,
      params: {
        DPI: 50,
      }
    });
    // var TiandiMap_cva = new TileLayer({
    //   source: sourceLayer
    // });
    var { bdMap1,olMapBd1,bdMap2,olMapBd2} = this.state;
    if (type==1) {
      // if (bdMap1 == null) {
      //   this.state.bdMap1 = TiandiMap_cva;
      //   olMapBd1.addLayer(TiandiMap_cva);
      // } else {
      //   bdMap1.setSource(sourceLayer);
      // }
      olMapBd1.getLayers().getArray()[0].setSource(sourceLayer);
    }else {
      // if (bdMap2 == null) {
      //   this.state.bdMap2 = TiandiMap_cva;
      //   olMapBd2.addLayer(TiandiMap_cva);
      // } else {
      //   bdMap2.setSource(sourceLayer);
      // }
      olMapBd2.getLayers().getArray()[0].setSource(sourceLayer);
    }

  }

  playFun = () => {
    // 设置播放按钮
    this.setState({
      autoPlay: !this.state.autoPlay,
    },()=>{
      // 清楚定时器
      clearInterval(this.timer);
      let _this = this;
      const {historyData,historyDataUrl} = _this.state;
      if (_this.state.autoPlay) {
        let historyArr = []
        for(let i in historyData){
          historyArr.push(i);
        }
        let i=0;
        _this.timer = setInterval(() => {
          const timesopt = document.getElementsByClassName('ant-slider-mark');
          timesopt.onclick = function(e){
            if(i<historyArr.length){
              _this.setState({
                imageValue: historyArr[i],
              })
              _this.queryHistoryImage(historyDataUrl[historyArr[i]]);
              i++
            }else{
              clearInterval(_this.timer);
              _this.setState({
                imageValue: historyArr[0],
                autoPlay: false
              })
              _this.queryHistoryImage(historyDataUrl[historyArr[0]]);
            }
          }
          timesopt.onclick()
        }, 1000);
      }
    });
  }

  render() {
    const { visible,title,list } = this.state.legends;
    //use netUrl
    const { SpaceResource,SpaceResourceUrl } = this.props.space;
    let menu = null;
    if (SpaceResource && SpaceResource.length > 0) {
      let openKeys = [];
      let submenus = SpaceResource.map(ele => {
        openKeys.push('' + ele.appMapId);
        let items = null, items2 = null;
        if (ele.childrens) {
          items = ele.childrens.map(ele1 => {
            //正式地址
            let {netUrl, url} = ele1;
            // netUrl = 'http://localhost/';
            return (
              <Menu.Item key={ele1.appMapId}>
                <Checkbox className={`checkboxStyle ${styles.checkboxStyle}`} onChange={this.onChangeMenu} value={netUrl + url || ''} mapName={ele1.mapName || ''} tableId={ele1.tableId || ''}
                          appMapId={ele1.appMapId || ''} mapType={ele1.mapType || ''}  description={ele1.description || ''}>
                  {ele1.mapName || ''}
                </Checkbox>
              </Menu.Item>
            );
          });
        }
        // if (SpaceResourceUrl!=null && SpaceResourceUrl.length >0) {
        //   items2 = SpaceResourceUrl.map(ele => {
        //     let {tableId,mapName, url} = ele;
        //     return (
        //       <Menu.Item key={tableId}>
        //         <Checkbox className={`checkboxStyle ${styles.checkboxStyle}`} onChange={this.onChangeMenuGrid} name={mapName || ''}  value={ url || ''}  tableId={tableId || ''}>
        //           {mapName || ''}
        //         </Checkbox>
        //       </Menu.Item>
        //     );
        //   });
        // }
        return (
          <SubMenu
            key={ele.appMapId}
            title={
              <MenuCom ele={ele} />
            }
            className={`submenusStyle ${styles.submenusStyle}`}
            // style={{background: 'transparent'}}
          >
            {items}
            {/* {items} */}
          </SubMenu>
        );
      });
      let submenus2 = null
      if (SpaceResourceUrl!=null && SpaceResourceUrl.length >0) {
        let items2 = SpaceResourceUrl.map(ele => {
          let {tableId,mapName, url} = ele;
          return (
            <Menu.Item key={tableId}>
              <Checkbox className={`checkboxStyle ${styles.checkboxStyle}`} onChange={this.onChangeMenuGrid}  name={mapName || ''} value={ url || ''}  tableId={tableId || ''}>
                {mapName || ''}
              </Checkbox>
            </Menu.Item>
          );
        });
        submenus2 = (<SubMenu
          title={
            <span>
                {/* <IconFont style={{fontSize: '15px', verticalAlign: 'middle'}} type={ele.mapName=='基础地理信息'?'icon-dilixinxi':(ele.mapName=='动植物资源'?'icon-leaf':(ele.mapName=='社会经济'?'icon-jingji':(ele.mapName=='监测数据'?'icon-shuju':'icon-wenjian')))} /> */}
                <IconFont style={{fontSize: '15px', verticalAlign: 'middle'}} type='icon-wenjian' />
                <span>专题图层</span>
            </span>
          }
          className={`submenusStyle ${styles.submenusStyle}`}
          >
            {items2}
            {/* {items} */}
          </SubMenu>
        );
      }
      menu = (
        <Menu
          mode="inline"
          defaultOpenKeys={openKeys}
          style={{ width: 236,overflow: 'hidden auto',height: 'calc(100% - 51px)', backgroundColor: 'transparent',marginTop: '10px', border: 0 }}>

          {submenus2}
          {submenus}
        </Menu>
        // <Menu
        //   mode="inline"
        //   defaultOpenKeys={openKeys}
        //   style={{ width: 236,overflow: 'hidden auto',height: 'calc(100% - 109px)', backgroundColor: 'transparent',marginTop: '10px', border: 0 }}>

        //   {submenus}
        // </Menu>
      );

    }

    const { SpaceResourceHistory } = this.props.space;
    var historyPlayer = document.getElementById('historyPlayer');
    if (SpaceResourceHistory!=null && SpaceResourceHistory.length > 0) {
      if(SpaceResourceHistory.length < 6 && historyPlayer!=null){
        // historyPlayer.style.width = SpaceResourceHistory.length * 10 + '%';
      }
    }
    let { historyData,historyDataUrl,historyMinMax} = this.state;
    var options='';
    if (SpaceResourceHistory!=null && SpaceResourceHistory.length > 0) {
      SpaceResourceHistory.map((e) => {
        historyData[e.mapName] = e.mapName+'年';
        historyDataUrl[e.mapName] = e.netUrl + e.url;
      });
      historyMinMax.min = Number(SpaceResourceHistory[0].mapName);
      historyMinMax.max = Number(SpaceResourceHistory[SpaceResourceHistory.length-1].mapName);
      options = SpaceResourceHistory.map(d => <Option key={d.mapName}>{d.mapName}年</Option>);
    } else {
      console.log("===>>"+SpaceResourceHistory);
    }

    // const { SpaceResourceUrl } = this.props.space;
    // var menuLayers = SpaceResourceUrl;
    // let items = null;
    // if (menuLayers!=null && menuLayers.length >0) {
    //   items = menuLayers.map(ele => {
    //     let {tableId,mapName, url} = ele;
    //     return (
    //       <Menu.Item key={tableId}>
    //         <Checkbox className={`checkboxStyle ${styles.checkboxStyle}`} onChange={this.onChangeMenuGrid}  value={ url || ''}  tableId={tableId || ''}>
    //           {mapName || ''}
    //         </Checkbox>
    //       </Menu.Item>
    //     );
    //   });
    // }
    // const menuLayer = (
    //   <Menu>
    //     {items}
    //   </Menu>
    // );

    return (
        <Layout style={{ padding: '0',display: 'block'}}>
          <Spin tip="Loading..." spinning={this.state.globalLoading}>
          <Content
            style={{
              // background: '#fff',
            }}
          >
            <Sider id="leftMenu" width={236} style={{ background: 'rgba(255,255,255,0.9)', padding: '0' ,height: this.state.height-50, position: 'fixed', zIndex: '999'}}>
              <div style={{ padding: '10px 20px', background: 'rgba(235,245,239,1)' }}>
                <span style={{ fontSize: '12px', color: '#40AF59' }}>空间资源</span>
              </div>
              {/* <Menu
                mode="inline"
                // defaultOpenKeys={openKeys}
                style={{ width: 236,overflow: 'hidden auto', backgroundColor: 'transparent',marginTop: '10px', border: 0 }}>
                <SubMenu
                  title="栅格图层"
                  className={`submenusStyle ${styles.submenusStyle}`}
                  // style={{background: 'transparent'}}
                >
                  {
                    this.props.space.SpaceResourceUrl&&this.props.space.SpaceResourceUrl.map(ele1 => {
                      let {tableId,mapName, url} = ele1;
                      return (
                        <Menu.Item key={tableId}>
                          <Checkbox className={`checkboxStyle ${styles.checkboxStyle}`} onChange={this.onChangeMenuGrid}  value={ url || ''}  tableId={tableId || ''}>
                            {mapName || ''}
                          </Checkbox>
                        </Menu.Item>
                      );
                    })
                  }
                </SubMenu>
              </Menu> */}
              {menu}
            </Sider>
            <div>
              <div id={this.mapDivId}   className="mapDivClassName" style={{height: this.state.height}}></div>
              <div id={this.mapDivId1}  className="mapDivClass" style={{height: this.state.height,display:"none"}}>
                <div className="bdDate1">
                  <Select
                    showSearch
                    style={{ width: 200 }}
                    value={ this.state.dbValueLeft }
                    onChange={this.onChangeTime}
                    filterOption={(input, option) =>
                      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                  >
                    {options}
                  </Select>
                </div>
              </div>
              <div id={this.mapDivId2}  className="mapDivClass" style={{marginLeft: '50%',height: this.state.height,display:"none"}} >
                <div className="bdDate2">
                  <Select
                    showSearch
                    style={{ width: 200 }}
                    value={ this.state.dbValueRight }
                    onChange={this.onChangeTime2}
                    filterOption={(input, option) =>
                      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                  >
                    {options}
                  </Select>
                </div>
              </div>
              <div id="search">
                <Search placeholder="输入关键字搜索"
                        value=''
                        onSearch={value => console.log(value)}/>
              </div>

              <div id="historyPlayer" style={{top: this.state.height-80 }}>
                <a className={styles.playBtn} onClick={this.playFun}><img src={require(this.state.autoPlay?'../../assets/play.png':'../../assets/suspend.png')} /></a>
                {/* <a><img src={require('../../assets/play.png')} /></a> */}

                <Slider min={historyMinMax.min} max={historyMinMax.max} marks={historyData} step={null}
                        onChange={this.onChangeSlider}
                        defaultValue={2010}
                        tooltipVisible={this.state.tooltipVis?true:false}
                        // tooltipVisible
                        value={parseInt(this.state.imageValue)}
                        />
                {/* <HorizontalTimeline
                  index={timeArr[0]}
                  indexClick={(index) => {
                    console.log(index)
                    this.setState({ value: index, previous: this.state.value });
                  }}
                  // values={ timeArr }
                  values={ timeArr.map(x => x) }
                  minEventPadding={50}
                  maxEventPadding={60}
                  linePadding={50}
                  isOpenBeginning={true}
                  isOpenEnding={false}
                  styles={{background: '#95cbdc', foreground: '#2791b3', outline: '#dfdfdf' }}
                /> */}
                {/* <TimeLayerSliderPanel
                  map={this.map}
                  initStartDate={moment(historyMinMax.min)}
                  initEndDate={moment(historyMinMax.max)}
                  timeAwareLayers={this.layers}
                  tooltips={tooltips}
                  autoPlaySpeedOptions={[0.5, 1, 2, 3, 4, 5, 600]}
                  onChange={this.onChangeSlider}
                  value={moment(historyMinMax.min)}
                /> */}
              </div>

              <div className={`legendStyle ${styles.legendStyle}`}>
                <LegendComm
                  visible={visible}
                  title={title}
                  list = {list}/>
              </div>

              <label id="layerbox_item">
                <Toolbar className="toolTip" style={{  position: 'absolute',zIndex: 10,top: '2em', right: '1em', backgroundColor: 'white', border: '1px solid #bbb'}}>
                  <ToggleGroup>
                    <MeasureButton
                      name="steps"
                      map={this.map}
                      measureType="line"
                      continueLineMsg="单击绘制，双击结束"
                      showMeasureInfoOnClickedPoints
                    >
              <span className="tool_item ranging item "  data-type="ranging">
                <span className="icon">
                  <svg className="toolsIcon" width="16px" height="16.00px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.67 16.74"><defs></defs><title>测距</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M16.31,5.16,11.51.36c-.47-.47-.73-.47-1.15,0C7,3.65,3.63,7,.29,10.38a.71.71,0,0,0,0,1.14c1.67,1.62,3.29,3.29,5,5a.71.71,0,0,0,.52.26c.32,0,.47-.21.68-.36l9.91-9.92C16.78,5.89,16.78,5.68,16.31,5.16Zm-1.72,1.2-8.3,8.29a.67.67,0,0,1-1.14,0L2,11.52c-.32-.31-.47-.62-.16-1s.47-.52.83-.1,1,1,1.46,1.51c.21.21.32.26.58,0,.57-.57.57-.57,0-1.15L3.42,9.49c-.2-.21-.26-.31,0-.57.63-.63.58-.63,1.2,0a6.18,6.18,0,0,1,.63.62c.37.47.63.47,1,0,.26-.31.37-.47,0-.73s-.52-.52-.78-.73c-.63-.63-.63-.63,0-1.25.21-.16.26-.21.47,0,.47.52,1,1,1.46,1.51.31.31.52.47.89.05s.52-.52.05-.94-.94-.93-1.46-1.4c-.26-.26-.21-.37,0-.58.57-.52.52-.57,1.1,0L9,6.41c.16.21.32.16.47,0,.68-.57.68-.57,0-1.2-.26-.26-.52-.57-.83-.83s-.05-.53.16-.68.31-.63.73-.21L11,5.05c.42.53.58,0,.84-.15s.41-.42,0-.73a12.51,12.51,0,0,1-1.41-1.41c-.16-.16-.47-.26-.31-.47a.85.85,0,0,1,.73-.52.73.73,0,0,1,.57.26l3.13,3.13C15.06,5.63,15.06,5.94,14.59,6.36Z"/></g></g></svg>
                </span>
                <span> 测距</span>
              </span>
                    </MeasureButton>
                    {/* <i className="splitLine"></i> */}
                    <MeasureButton
                      name="poly"
                      map={this.map}
                      measureType="polygon"
                      continuePolygonMsg="单击绘制，双击结束"
                    >
              <span className="tool_item area item " data-type="area" >

                <span className="icon">
                  <svg class="icon" className="toolsIcon" width="16px" height="16.00px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.16 16.16"><defs></defs><title>测面</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M15.61,3.82a.54.54,0,0,0,.55-.55V.55A.54.54,0,0,0,15.61,0H12.89a.54.54,0,0,0-.55.55v.81H3.82V.55A.54.54,0,0,0,3.27,0H.55A.54.54,0,0,0,0,.55V3.27a.58.58,0,0,0,.55.55h.81v8.45H.55a.54.54,0,0,0-.55.55v2.72a.54.54,0,0,0,.55.55H3.27a.54.54,0,0,0,.55-.55V14.8h8.45v.81a.55.55,0,0,0,.55.55h2.72a.54.54,0,0,0,.55-.55V12.89a.54.54,0,0,0-.55-.55H14.8V3.82Zm-3.27,9v.88h-2.2l3.56-2.56v1.13h-.81A.54.54,0,0,0,12.34,12.82ZM9,13.7H5.51L13.7,7.8v2.53ZM13.7,6.92,4.35,13.7H3.82v-.81a.54.54,0,0,0-.55-.55H2.78L13.7,4.39ZM3.82,3.27V2.45H6L2.45,5V3.82h.82A.54.54,0,0,0,3.82,3.27Zm3.24-.82h3.41l-8,5.85V5.85Zm4.66,0h.55v.82a.55.55,0,0,0,.55.55h.56L2.45,11.72V9.19ZM1.09,2.8V1.09H2.8V2.8H1.09ZM2.8,15.07H1.09V13.36H2.8Zm12.27-1.71v1.71H13.36V13.36ZM13.36,2.8V1.09h1.71V2.8Z"/></g></g></svg>
                </span>
               <span> 测面积</span>
              </span>
                    </MeasureButton>
                    {/* <i className="splitLine"></i> */}
                    <DigitizeButton
                      name="deleteFeature"
                      map={this.map}
                      editType="Delete"
                    >
              <span className="tool_item delete item "  data-type="delete">
                <span className="icon">
                  <svg className="toolsIcon" width="16px" height="16.00px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.99 15.76"><defs></defs><title>删除</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M14,3.68a1.54,1.54,0,0,0-1.5-1.58H11V1.58A1.54,1.54,0,0,0,9.5,0h-5A1.55,1.55,0,0,0,3,1.58V2.1H1.49A1.54,1.54,0,0,0,0,3.69,1.58,1.58,0,0,0,1,5.16v8.5a2,2,0,0,0,2,2.1h8a2.05,2.05,0,0,0,2-2.1V5.16a1.58,1.58,0,0,0,1-1.48M4,1.58a.51.51,0,0,1,.49-.53h5a.52.52,0,0,1,.51.53V2.1H4Zm8,12.08a1,1,0,0,1-1,1.05H3a1,1,0,0,1-1-1.05V5.25H12Zm.5-9.46h-11A.51.51,0,0,1,1,3.68a.54.54,0,0,1,.59-.53h11a.52.52,0,0,1,.41.53.51.51,0,0,1-.5.52"/><path class="cls-1" d="M4.49,12.87a.51.51,0,0,0,.5-.52V7.62a.51.51,0,0,0-.5-.53.52.52,0,0,0-.5.53v4.73a.51.51,0,0,0,.5.52m2.5,0a.51.51,0,0,0,.5-.52V7.62A.51.51,0,0,0,7,7.09a.52.52,0,0,0-.5.53v4.73a.51.51,0,0,0,.5.52m2.5,0a.51.51,0,0,0,.5-.52V7.62a.51.51,0,0,0-.5-.53.52.52,0,0,0-.5.53v4.73a.51.51,0,0,0,.5.52"/></g></g></svg>
                </span>
                <span> 清除</span>
              </span>
                    </DigitizeButton>

                  </ToggleGroup>
                  {/* <i className="splitLine"></i> */}
                  <SimpleButton id="history">
                         <span className="tool_item history item"  data-type="history" >
                          <span className="icon">
                            <svg class="icon" className="toolsIcon" width="16px" height="16.00px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.7 16.37"><defs></defs><title>历史</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M8.35,0A8.27,8.27,0,0,0,0,8.19a8.27,8.27,0,0,0,8.35,8.18A8.27,8.27,0,0,0,16.7,8.19,8.27,8.27,0,0,0,8.35,0Zm0,15.09a7,7,0,0,1-7-6.9,7,7,0,0,1,7-6.9,7,7,0,0,1,7,6.9A7,7,0,0,1,8.35,15.09Z"/><polygon class="cls-1" points="8.98 8.02 8.98 8.01 8.98 2.9 7.68 2.9 7.68 9.3 13.4 9.3 13.4 8.02 8.98 8.02"/></g></g></svg>
                          </span>
                       <span> 历史</span>
                     </span>
                  </SimpleButton>
                  {/* <i className="splitLine"></i> */}

                  <SimpleButton id="compare">
                      <span className="tool_item compare item"  data-type="compare">
                        <span className="icon">
                          <svg class="icon" className="toolsIcon" width="16px" height="16.00px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.98 16.74"><defs></defs><title>对比</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><polygon class="cls-1" points="0 15.22 6.09 15.22 6.09 13.7 1.52 13.7 1.52 3.04 6.09 3.04 6.09 1.52 0 1.52 0 15.22"/><rect class="cls-1" x="9.89" y="1.52" width="1.52" height="1.52"/><rect class="cls-1" x="12.17" y="1.52" width="1.52" height="1.52"/><rect class="cls-1" x="12.18" y="13.7" width="1.52" height="1.52"/><rect class="cls-1" x="9.89" y="13.7" width="1.52" height="1.52"/><rect class="cls-1" x="14.46" y="1.52" width="1.52" height="1.52"/><rect class="cls-1" x="14.46" y="6.09" width="1.52" height="1.52"/><rect class="cls-1" x="14.46" y="13.7" width="1.52" height="1.52"/><rect class="cls-1" x="14.46" y="8.37" width="1.52" height="1.52"/><rect class="cls-1" x="14.46" y="10.65" width="1.52" height="1.52"/><rect class="cls-1" x="14.46" y="3.8" width="1.52" height="1.52"/><rect class="cls-1" x="7.61" width="1.52" height="16.74"/></g></g></svg>
                        </span>
                       <span> 对比</span>
                     </span>
                  </SimpleButton>

                  {/* <Dropdown overlay={menuLayer} placement="bottomRight"  disabled={this.state.DropdownDisabled}>
                    <Button>
                      <span className="tool_item item" >
                       <span className="icon">
                         <svg className="toolsIcon" width="16px" height="16.00px" viewBox="0 0 1024 1024" version="1.1"
                              xmlns="http://www.w3.org/2000/svg"><path
                           d="M32.822657 383.690114L475.085161 645.115484a73.113088 73.113088 0 0 0 73.932283 0L991.279948 383.690114a64.204351 64.204351 0 0 0 0-112.024816L549.017444 10.239928a73.113088 73.113088 0 0 0-73.932283 0L32.822657 271.665298a64.204351 64.204351 0 0 0 0 112.024816zM512.051302 95.231333L904.957352 327.677706 512.051302 560.124079 119.145253 327.677706z"
                           fill="#8a8a8a"/><path
                           d="M955.2354 496.738923l-430.076989 248.215862a27.13581 27.13581 0 0 1-26.214217 0l-430.076989-248.215862a46.079677 46.079677 0 0 0-45.874879 79.871441l430.076989 248.215862a117.759176 117.759176 0 0 0 117.759176 0l430.076989-248.215862a46.079677 46.079677 0 0 0-45.772479-79.871441z"
                           fill="#8a8a8a"/><path
                           d="M955.2354 680.238438l-430.076989 248.113464a27.13581 27.13581 0 0 1-26.214217 0l-430.076989-248.113464a46.079677 46.079677 0 0 0-45.874879 79.871441l430.076989 248.113463a117.759176 117.759176 0 0 0 117.759176 0l430.076989-248.113463a46.079677 46.079677 0 0 0-45.772479-79.871441z"
                           fill="#8a8a8a"/></svg>
                        </span>
                      <span>&nbsp;图层</span>
                      </span>
                    </Button>
                  </Dropdown> */}
                  {/*<SimpleButton id="fullscreen" class="fullscreen">*/}
                  {/*  <div  className="sidepanel">*/}
                  {/*  <label className="tool_item fullscreen item " data-type="fullscreen" > <span*/}
                  {/*    className="icon"> <img className="iconfont icon-area" srcSet={u38}></img> </span>*/}
                  {/*    <span> 全屏</span>*/}
                  {/*  </label>*/}
                  {/*  </div>*/}
                  {/*</SimpleButton>*/}
                </Toolbar>
              </label>

            </div>
          </Content>
          </Spin>
        </Layout>
    );
  }
}

export default SpaceResources;
